import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
import Navbar from './the-head';
import './HeroSection.css'; // 共用原样式文件
import CoursesSection from './CoursesSection';
import { Link, Outlet } from 'react-router-dom';
import BackgroundImg from './background-img.png'
import Talk from './talk';
import { useSearchParams } from 'react-router-dom';
import Footer from './Footer';
import AboutUs from './AboutUs';
import FitnessKnowledge from './Knowledge';
export default function HeroSection(){
 const [SearchParams] = useSearchParams();
  const email = SearchParams.get('email');
  //逻辑已处理完毕
  return (
    <div>
    <Navbar/>
    <section id="home" className="hero-section">
      {/* 1. 背景图与遮罩（全屏覆盖，确保文案可读性） */}
      <div className="hero-bg">
        <img 
          src={BackgroundImg}
          alt="健身背景" 
          className="hero-img"
        />
        <div className="hero-overlay"></div>
      </div>

      {/* 2. 英雄区核心内容（文字+按钮，层级高于背景） */}
      <div className="container hero-content">
        <div className="hero-text">
          <h1>
            藏器于身<span className="highlight">待时而动</span>
          </h1>
          <p>
            专业教练指导，科学训练计划，助你达成健身目标，塑造理想身材
          </p>
          {/* 功能按钮：跳转到课程/计划页面 */}
          <div className="hero-buttons">
            <a href="#courses" className="btn primary-btn">
              查看课程
            </a>
            <a href="#plans" className="btn secondary-btn">
              定制专属计划
            </a>
          </div>
        </div>
      </div>

      {/* 3. 滚动提示（引导用户向下浏览） */}
      <div className="scroll-indicator">
        <a href="#courses" className="scroll-link">
          <span>向下滚动</span>
          <FontAwesomeIcon icon={faChevronDown} />
        </a>
      </div>
    </section>
    <CoursesSection/>
    <Outlet/>
    <Talk/>
    <FitnessKnowledge/>
    <AboutUs/>
<Footer/>
    </div>

  );
};